<template>
	<div>
		<div v-loading.body="loading" style="width:50%;float:left">
			<div v-for="(item,key) in paramTypeList" style="margin-bottom:30px;">
				<el-card class="box-card">
				  <div slot="header" class="clearfix" >
				    <el-alert :title="dealTitle(key)" type="info" :closable="false"></el-alert>
				  </div>
				  <div v-for="(item2,key2) in item" :key="item2.id" class="text item" style="padding:10px 0;display:inline-block;margin-left:20px;">
				  	<el-checkbox-group v-model="checkedList">
					  <el-checkbox :label="item2.id" @change="selectParam" :name="item2.name+' '+item2.type" >
						<el-popover trigger="hover" placement="bottom" style="display:inline-block">
				          <p v-if="item2.value">枚举: {{dealValue(item2.value)}}</p>
				          <p>备注:{{item2.mark}}</p>
				          <div slot="reference" class="name-wrapper">
				            <el-tag>{{item2.name}}</el-tag>
				          </div>
				        </el-popover>
					  
					  </el-checkbox>
				  	</el-checkbox-group>
				  </div>
				</el-card>
			</div>
		</div>
		<div style="width:50%;float:right;margin-bottom:50px;" v-loading.body="loading">
			<el-table :data="tableList.paramList" style="width: 100%">
		      <el-table-column type="index"></el-table-column>
		      <el-table-column prop="name" label="名称"></el-table-column>
		      <el-table-column prop="type" label="类型" :formatter="dealTableType"></el-table-column>
		      <el-table-column  label="是否必须">
		      	<template scope="scope">
		      		<el-checkbox v-model="checked" v-if="scope.row.is_required == 1"></el-checkbox>
		      		<el-checkbox  v-if="scope.row.is_required == 0"></el-checkbox>
		      	</template>
		      </el-table-column>
		      <!-- <el-table-column  label="是否验证">
		      	<template scope="scope">
		      		<el-checkbox v-model="checked" v-if="scope.row.is_validated == 1"></el-checkbox>
		      		<el-checkbox  v-if="scope.row.is_validated == 0"></el-checkbox>
		      	</template>
		      </el-table-column> -->
		      <el-table-column prop="str_reg" label="验证规则"></el-table-column>
		      <el-table-column label="操作" width="180">
		      	<template scope="scope">
			        <el-button size="small" type="danger" icon="delete" @click="cancleParam(scope.$index,scope.row)"></el-button>
		      	</template>
		      </el-table-column>
		    </el-table>

		</div>			

		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="dialogOkBtn" >确 定</el-button> 
		  </div>
	</div>
</template>

<script>
import _http from '../common/http.vue'

export default{
	props:['editDataInit'],
	data(){
		return{
			loading:false,
			paramList:[],//字段总列表
			checkedList:[],//选中的字段列表
			tableList:{
				paramList:[]//表格数据列表
			},
			selectParamValueIndexList:{},//value 和 index 对应的对象
			
		}
	},
	computed:{

		paramTypeList(){
			let a = this.paramList
			let list = {}
			for(let i in a){
				if (!list[a[i]['type']]) {
					list[a[i]['type']] = []
				}
				list[a[i]['type']].push(a[i])
			}
			return list
		},
	},
	mounted(){
		this.loading = true
		this.getParamList()
	},
	methods:{
		dealTitle(type){
			if (type == 'text') {
				return '文本框'
			}else if(type == 'file'){
				return '文件'
			}else if(type == 'image'){
				return '图片'
			}else if(type == 'radio'){
				return '单选'
			}else if(type == 'checkbox'){
				return '多选'
			}else if(type == 'select'){
				return '下拉框'
			}else if(type == 'textarea'){
				return '文本域'
			}
		},
		dealTableType(row,column){
			return this.dealTitle(row.type)
		},
		dealRequired(row,column){
			if(row.is_required == 1){
				return '<el-checkbox v-model="checked"></el-checkbox>'
			}else{
				return '<el-checkbox></el-checkbox>'
			}
		},
		dealValue(value){
			if (value) {
				let v = JSON.parse(value)
				let str = ''
				for(let i in v){
					str += v[i]['label']+','
				}
				return str
			}else{
				return ''
			}
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		dialogOkBtn(){
			_http.axiosRequest(this,'configEditFormParam',{id:this.editDataInit.id,paramList:this.checkedList},(res)=>{
    			if (_http.apiResult(this,res.data)) {
    				this.closeDialog()
    			}
    		})
		},
		getParamList(){
			_http.axiosRequest(this,'configParamList',{},(res)=>{
    			this.paramList = res.data
    			this.getFormParamList()
    		})
		},
		getFormParamList(){
			let id = this.editDataInit.id
			_http.axiosRequest(this,'configGetFormParamList',{id:id},(res)=>{
				let a = res.data.paramIdList
				let b = res.data.paramInfoList
				if (a.length >0 ) {
					for(let i in a){
						this.checkedList.push(parseInt(a[i]))
					}
					//console.log(this.checkedList.indexOf(20))

					for(let i in this.checkedList){
						this.selectParamValueIndexList[this.checkedList[i]] = i
					}
				}
				if (b.length >0) {
					for(let i in b){
						this.tableList.paramList.push({name:b[i]['name'],type:b[i]['type'],is_required:b[i]['is_required'],is_validated:b[i]['is_validated'],str_reg:b[i]['str_reg']})
					}
				}
				this.loading = false
    		})
		},
		selectParam(event){
			for(let i in this.checkedList){
				this.selectParamValueIndexList[this.checkedList[i]] = parseInt(i)
			}
			if (event.target.checked) {
				let name = event.target.name
				let arr = name.split(" ")
				this.tableList.paramList.push({name:arr[0],type:arr[1]})
				//this.$set(this.cardList.paramList,value,{name:arr[0],type:arr[1]})
			}else{
				let value = parseInt(event.target.value)
				//let index = this.checkedList.indexOf(value)
				let index = parseInt(this.selectParamValueIndexList[value])
  				this.tableList.paramList.splice(index,1)

				//this.$delete(this.cardList.paramList,value)
			}
		},
		cancleParam(index,row){
			this.tableList.paramList.splice(index,1)
			this.checkedList.splice(index,1)
		},
		paramRules(index,row){
			console.log(row)
		}

	}

}
	
</script>

<style>
</style>